<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>天猫头部搜索框</title>
	<link rel="stylesheet" href="css/index.css">
	<script src="js/jQuery.js"></script>
	<script src="js/index.js"></script>
</head>
<body>
<div id="head-search">
	<div id="search">
		<div id="hearch-left"><i class="iconfont">&#xe7c5;</i></div>
		<div id="hearch-right">
			<form action="" class="fom">
				<input type="text" placeholder="清新小短裤 秒变大长腿" ="" class="int1" style="color: rgb(102, 102, 102)";>
				
				<input type="submit" value="搜索" class="int2">

			</form>
			<ul class="box-ul">
				
			</ul>

		</div>
	</div>
</div>
<!-- 左浮动窗-->
<div class="Floor-wrap">
	<div class="Floor1 Floor">一楼</div>
	<div class="Floor2 Floor">二楼</div>
	<div class="Floor3 Floor">三楼</div>
	<div class="Floor4 Floor">四楼</div>
	<div class="Floor5 Floor">五楼</div>
	<div class="Floor6 Floor">六楼</div>
	<div class="Floor7 Floor">七楼</div>
	<div class="Floor8 Floor">八楼</div>
	<div class="Floor9 Floor">九楼</div>
	<div class="Floor10">
		<ul>
			<li style="background:rgba(0,0,0,.6);"><a href="javascript:;">导航</a></li>
			<li><a href="javascript:;">1</a></li>
			<li><a href="javascript:;">2</a></li>
			<li><a href="javascript:;">3</a></li>
			<li><a href="javascript:;">4</a></li>
			<li><a href="javascript:;">5</a></li>
			<li><a href="javascript:;">6</a></li>
			<li><a href="javascript:;">7</a></li>
			<li><a href="javascript:;">8</a></li>
			<li><a href="javascript:;">9</a></li>
			<li><a href="javascript:;">返回顶部</a></li>
		</ul>
	</div>
</div>
<!-- ··································右侧购物车 ····································-->
<div id="gwc">
	<div id="gw">
		<ul id="gwleft">
			<li>
				<i class="iconfont">&#xe621;</i>
				<em class="tab-text tab-a">我的特权</em>
			</li>
			<li style="height:140px;" class="list-hide">
				<i class="iconfont">&#xe652;</i>
				<em class="tab-txt tab-a">购</em>
				<em class="tab-txt ">物</em>
				<em class="tab-txt ">车</em>
				<span class="tab-sub J-count ">0</span>
			</li>
			<li>
				<i class="iconfont">&#xf0191;</i>
				<em class="tab-text tab-a">我的资产</em>
			</li>
			<li>
				<i class="iconfont">&#xe642;</i>
				<em class="tab-text tab-a">我关注的品牌</em>
			</li>
			<li>
				<i class="iconfont">&#xec8c;</i>
				<em class="tab-text tab-a">我的收藏</em>
			</li>
			<li>
				<i class="iconfont">&#xe60c;</i>
				<em class="tab-text tab-a">我看过的</em>
			</li>
			<li>
				<i class="iconfont">&#xf0030;</i>
				<em class="tab-text tab-a"></em>
			</li>
			<li>
				<i class="iconfont">&#xe625;</i>
				<em class="tab-text tab-a">返回顶部</em>
			</li>
			
		</ul>
		<ul id="gw-right">
			<li>我的特权</li>
			<li>购物车</li>
			<li>我的资产</li>
			<li>我关注的品牌</li>
			<li>我的收藏</li>
			<li>我看过的</li>
			
		</ul>

	</div>
</div>
<script>
$(function(){
	var Olist=$("#gwleft li");
	var Olst=$("#gwleft li");
	// console.log(list)
	Olist.hover(function(){
		$(this).css("background","#c40000")
		$("#gwleft").find(".tab-a").eq($(this).index()).stop(true).animate({"left":-100,"opacity":1},200)
	},function(){
		$(this).css("background","")
		$("#gwleft").find(".tab-a").eq($(this).index()).stop(true).animate({"left":-150,"opacity":0},200)
	})
	var a=true
	Olst.click(function(){
		if(a){
			$("#gw-right li").eq($(this).index()).css("display","block");
			$("#gw-right").css("display","block");

		}
		else{
			$("#gw-right li").eq($(this).index()).css("display","none");
			$("#gw-right").css("display","none");
		}
		a=!a
	})


})

</script>



</body>
</html>